﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewData["Title"] = "维修单管理";
    Layout = null;
}
@Html.AntiForgeryToken()
@using Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>维修单管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="~/libs/scripts/layui-v2.5.6/layui/css/layui.css" media="all">
    <style>
        body {
            background: #f8f9fa;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }

        .page-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 30px 0;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .page-title {
            font-size: 28px;
            font-weight: 600;
            margin: 0;
            text-align: center;
        }

        .page-subtitle {
            text-align: center;
            margin-top: 8px;
            opacity: 0.9;
            font-size: 14px;
        }

        .layui-card {
            border-radius: 8px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.08);
            border: none;
            margin-bottom: 20px;
        }

        .search-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }

        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 2px solid #f0f0f0;
        }

        .layui-form-label {
            width: 90px;
            font-weight: 500;
            text-align: right;
            padding-right: 10px;
        }
        
        .layui-form-item {
            margin-bottom: 15px;
        }
        
        .layui-inline {
            margin-right: 15px;
            vertical-align: top;
        }
        
        .layui-input-inline {
            margin-right: 0;
        }
        
        /* 修复下拉框样式 */
        .layui-form select {
            padding-right: 30px;
        }

        .layui-input, .layui-select {
            border-radius: 4px;
            border: 1px solid #e6e6e6;
            transition: all 0.3s;
        }

        .layui-input:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
        }

        .btn-section {
            background: white;
            padding: 15px 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .layui-btn {
            border-radius: 6px;
            font-weight: 500;
            transition: all 0.3s;
        }

        .layui-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .stats-info {
            color: #666;
            font-size: 14px;
        }

        .stats-number {
            color: #667eea;
            font-weight: 600;
            font-size: 16px;
        }

        .table-section {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }

        .layui-table-header {
            background: #fafbfc;
        }

        .layui-table th {
            font-weight: 600;
            color: #333;
        }

        .layui-table td {
            padding: 20px 15px;
            line-height: 1.8;
        }
        
        /* 强制操作列显示完整内容 */
        .layui-table tbody tr {
            height: 80px !important;
        }
        
        .layui-table tbody tr td {
            height: 80px !important;
            vertical-align: middle;
        }
        
        .layui-table tbody tr td:last-child {
            padding: 5px !important;
            overflow: visible !important;
        }

        .layui-table tbody tr:hover {
            background-color: #f8f9ff;
        }

        .operation-btn {
            margin-right: 5px;
            border-radius: 4px;
        }

        /* 响应式设计 */
        @@media (max-width: 1200px) {
            .layui-inline {
                margin-right: 10px;
            }
            
            .layui-input-inline {
                width: 120px !important;
            }
        }
        
        @@media (max-width: 768px) {
            .layui-inline {
                display: block;
                margin-bottom: 15px;
                margin-right: 0;
            }
            
            .layui-form-label {
                width: 80px;
                text-align: left;
                float: none;
                display: inline-block;
                line-height: normal;
                padding-right: 10px;
            }
            
            .layui-input-inline {
                width: 200px !important;
                margin-left: 0;
            }
            
            .btn-section {
                flex-direction: column;
                gap: 10px;
            }
            
            .layui-btn-group {
                display: flex;
                flex-wrap: wrap;
                gap: 5px;
            }
        }

        /* 优化分页样式 */
        .layui-laypage {
            margin-top: 20px;
            text-align: center;
        }

        .layui-laypage a, .layui-laypage span {
            border-radius: 4px;
        }

        /* 状态标签样式 */
        .status-tag {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }

        .status-pending {
            background: #fff3cd;
            color: #856404;
        }

        .status-completed {
            background: #d1edff;
            color: #0c5460;
        }

        .status-rejected {
            background: #f8d7da;
            color: #721c24;
        }
    </style>
</head>
<body>
    <!-- 页面头部 -->
    <div class="page-header">
        <div class="layui-container">
            <h1 class="page-title">设备维修管理系统</h1>
            <p class="page-subtitle">Equipment Repair Order Management System</p>
        </div>
    </div>

    <div class="layui-container">
        <!-- 搜索区域 -->
        <div class="search-section">
            <div class="section-title">
                <i class="layui-icon layui-icon-search"></i> 搜索条件
            </div>
            <div class="layui-form" lay-filter="searchForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">维修单编号</label>
                        <div class="layui-input-inline" style="width: 150px;">
                            <input type="text" name="repairOrderCode" placeholder="请输入维修单编号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">维修单名称</label>
                        <div class="layui-input-inline" style="width: 150px;">
                            <input type="text" name="repairOrderName" placeholder="请输入维修单名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">设备编码</label>
                        <div class="layui-input-inline" style="width: 150px;">
                            <input type="text" name="equipmentCode" placeholder="请输入设备编码" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">设备名称</label>
                        <div class="layui-input-inline" style="width: 150px;">
                            <input type="text" name="equipmentName" placeholder="请输入设备名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">维修结果</label>
                        <div class="layui-input-inline" style="width: 150px;">
                            <select name="repairResults" lay-verify="" lay-search="">
                                <option value="">请选择维修结果</option>
                                <option value="维修完成">维修完成</option>
                                <option value="部分完成">部分完成</option>
                                <option value="无法维修">无法维修</option>
                                <option value="待配件">待配件</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">单据状态</label>
                        <div class="layui-input-inline" style="width: 150px;">
                            <select name="documentStatus" lay-verify="" lay-search="">
                                <option value="">请选择单据状态</option>
                                <option value="0">待处理</option>
                                <option value="1">已完成</option>
                                <option value="2">已取消</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit lay-filter="search" style="margin-left: 20px;">
                            <i class="layui-icon layui-icon-search"></i> 搜索
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">
                            <i class="layui-icon layui-icon-refresh"></i> 重置
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 操作按钮和统计信息 -->
        <div class="btn-section">
            <div class="layui-btn-group">
                <button class="layui-btn layui-btn-sm" id="addBtn">
                    <i class="layui-icon layui-icon-add-1"></i> 新增维修单
                </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger" id="deleteBtn">
                    <i class="layui-icon layui-icon-delete"></i> 删除
                </button>
            </div>
            <div class="stats-info">
                共 <span class="stats-number" id="totalCount">0</span> 条维修单
            </div>
        </div>

        <!-- 数据表格 -->
        <div class="table-section">
            <table class="layui-hide" id="repairOrderTable" lay-filter="repairOrderTable"></table>
        </div>
    </div>

    <!-- 表格操作列模板 -->
    <script type="text/html" id="operationTpl">
        <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        <br/>
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="status">完成</a>
        <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="detail">详情</a>
    </script>

    <script src="~/libs/scripts/layui-v2.5.6/layui/layui.js"></script>
    <script>
    layui.use(['table', 'form', 'layer', 'laydate'], function(){
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var $ = layui.$;

        // 获取token
        var token = $('input[name="__RequestVerificationToken"]').val();

        // 表格渲染
        table.render({
            elem: '#repairOrderTable',
            url: '/DeviceLedger/RepairOrderList',
            method: 'POST',
            headers: {
                'RequestVerificationToken': token
            },
            toolbar: false,
            defaultToolbar: [],
            cols: [[
                {type: 'checkbox', width: 60, fixed: 'left'},
                {field: 'repairOrderCode', title: '维修单编号', width: 150, sort: true},
                {field: 'repairOrderName', title: '维修单名称', width: 150, sort: true},
                {field: 'equipmentCode', title: '设备编码', width: 120, sort: true},
                {field: 'equipmentName', title: '设备名称', width: 120, sort: true},
                {field: 'warrantyDate', title: '报修日期', width: 110, templet: function(d){
                    return d.warrantyDate ? layui.util.toDateString(new Date(d.warrantyDate), 'yyyy-MM-dd') : '';
                }},
                {field: 'completionDate', title: '维修完成日期', width: 120, templet: function(d){
                    return d.completionDate ? layui.util.toDateString(new Date(d.completionDate), 'yyyy-MM-dd') : '';
                }},
                {field: 'acceptanceDate', title: '验收日期', width: 110, templet: function(d){
                    return d.acceptanceDate ? layui.util.toDateString(new Date(d.acceptanceDate), 'yyyy-MM-dd') : '';
                }},
                {field: 'repairResults', title: '维修结果', width: 100, templet: function(d){
                    var colorMap = {
                        '维修完成': '#28a745', 
                        '部分完成': '#ffc107', 
                        '无法维修': '#dc3545', 
                        '待配件': '#17a2b8'
                    };
                    var color = colorMap[d.repairResults] || '#6c757d';
                    return '<span style="color: ' + color + '; font-weight: 600;">' + (d.repairResults || '') + '</span>';
                }},
                {field: 'repairPersonnel', title: '维修人员', width: 100},
                {field: 'acceptancePersonnel', title: '验收人员', width: 100},
                {field: 'documentStatus', title: '单据状态', width: 100, templet: function(d){
                    var status = d.documentStatus;
                    if(status == '0') return '<span class="status-tag status-pending">待处理</span>';
                    if(status == '1') return '<span class="status-tag status-completed">已完成</span>';
                    if(status == '2') return '<span class="status-tag status-rejected">已取消</span>';
                    return '<span class="status-tag">未知</span>';
                }},
                {fixed: 'right', title:'操作', toolbar: '#operationTpl', width: 140, unresize: true}
            ]],
            page: true,
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            request: {
                pageName: 'page',
                limitName: 'limit'
            },
            text: {
                none: '<div style="text-align: center; padding: 50px; color: #999;"><i class="layui-icon layui-icon-face-cry" style="font-size: 48px; display: block; margin-bottom: 10px;"></i>暂无数据</div>'
            },
            done: function(res, curr, count){
                // 更新统计信息
                $('#totalCount').text(res.count || 0);
            }
        });

        // 搜索
        form.on('submit(search)', function(data){
            table.reload('repairOrderTable', {
                where: {
                    RepairOrderCode: data.field.repairOrderCode,
                    RepairOrderName: data.field.repairOrderName,
                    EquipmentCode: data.field.equipmentCode,
                    EquipmentName: data.field.equipmentName,
                    RepairResults: data.field.repairResults,
                    DocumentStatus: data.field.documentStatus
                },
                headers: {
                    'RequestVerificationToken': token
                },
                page: {
                    curr: 1
                }
            });
            return false;
        });

        // 新增
        $('#addBtn').on('click', function(){
            layer.msg('跳转到新增页面...', {time: 1000});
            setTimeout(function(){
                window.location.href = '/DeviceLedger/CreateRepairOrderView';
            }, 500);
        });

        // 删除
        $('#deleteBtn').on('click', function(){
            var checkStatus = table.checkStatus('repairOrderTable');
            if(checkStatus.data.length === 0){
                layer.msg('请选择要删除的数据', {icon: 2});
                return;
            }
            layer.confirm('确定删除选中的 ' + checkStatus.data.length + ' 条数据吗？', {
                icon: 3,
                title: '确认删除'
            }, function(index){
                var loading = layer.load(2, {content: '正在删除...'});
                var ids = [];
                layui.each(checkStatus.data, function(i, item){
                    ids.push(item.id);
                });
                
                $.ajax({
                    url: '/DeviceLedger/BatchDeleteRepairOrder',
                    type: 'POST',
                    data: JSON.stringify(ids),
                    contentType: 'application/json',
                    headers: {
                        'RequestVerificationToken': token
                    },
                    success: function(result){
                        layer.close(loading);
                        if(result.code === 0){
                            layer.msg('删除成功', {icon: 1});
                            table.reload('repairOrderTable');
                        } else {
                            layer.msg(result.msg || '删除失败', {icon: 2});
                        }
                    },
                    error: function(){
                        layer.close(loading);
                        layer.msg('删除失败', {icon: 2});
                    }
                });
                layer.close(index);
            });
        });

        // 表格行工具事件
        table.on('tool(repairOrderTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'edit'){
                layer.msg('跳转到修改页面...', {time: 1000});
                setTimeout(function(){
                    window.location.href = '/DeviceLedger/UpdateRepairOrderView?id=' + data.id;
                }, 500);
            } else if(obj.event === 'del'){
                layer.confirm('确定删除维修单 "' + data.repairOrderName + '" 吗？', {
                    icon: 3,
                    title: '确认删除'
                }, function(index){
                    var loading = layer.load(2, {content: '正在删除...'});
                    $.ajax({
                        url: '/DeviceLedger/BatchDeleteRepairOrder',
                        type: 'POST',
                        data: JSON.stringify([data.id]),
                        contentType: 'application/json',
                        headers: {
                            'RequestVerificationToken': token
                        },
                        success: function(result){
                            layer.close(loading);
                            if(result.code === 0){
                                layer.msg('删除成功', {icon: 1});
                                obj.del();
                                // 更新统计
                                var currentCount = parseInt($('#totalCount').text()) - 1;
                                $('#totalCount').text(currentCount);
                            } else {
                                layer.msg(result.msg || '删除失败', {icon: 2});
                            }
                        },
                        error: function(){
                            layer.close(loading);
                            layer.msg('删除失败', {icon: 2});
                        }
                    });
                    layer.close(index);
                });
            } else if(obj.event === 'status'){
                layer.confirm('确定将维修单 "' + data.repairOrderName + '" 标记为完成吗？', {
                    icon: 3,
                    title: '确认操作'
                }, function(index){
                    var loading = layer.load(2, {content: '正在更新状态...'});
                    $.ajax({
                        url: '/DeviceLedger/UpdateRepairOrderStatus',
                        type: 'POST',
                        data: { id: data.id },
                        headers: {
                            'RequestVerificationToken': token
                        },
                        success: function(result){
                            layer.close(loading);
                            if(result.code === 0){
                                layer.msg('状态更新成功', {icon: 1});
                                table.reload('repairOrderTable');
                            } else {
                                layer.msg(result.msg || '状态更新失败', {icon: 2});
                            }
                        },
                        error: function(){
                            layer.close(loading);
                            layer.msg('状态更新失败', {icon: 2});
                        }
                    });
                    layer.close(index);
                });
            } else if(obj.event === 'detail'){
                // 查看详情
                layer.open({
                    type: 1,
                    title: '维修单详情 - ' + data.repairOrderName,
                    area: ['800px', '600px'],
                    content: '<div style="padding: 20px;">' +
                        '<div class="layui-form">' +
                        '<div class="layui-form-item">' +
                        '<label class="layui-form-label">维修单编号：</label>' +
                        '<div class="layui-input-inline">' + (data.repairOrderCode || '') + '</div>' +
                        '</div>' +
                        '<div class="layui-form-item">' +
                        '<label class="layui-form-label">维修单名称：</label>' +
                        '<div class="layui-input-inline">' + (data.repairOrderName || '') + '</div>' +
                        '</div>' +
                        '<div class="layui-form-item">' +
                        '<label class="layui-form-label">设备编码：</label>' +
                        '<div class="layui-input-inline">' + (data.equipmentCode || '') + '</div>' +
                        '</div>' +
                        '<div class="layui-form-item">' +
                        '<label class="layui-form-label">设备名称：</label>' +
                        '<div class="layui-input-inline">' + (data.equipmentName || '') + '</div>' +
                        '</div>' +
                        '<div class="layui-form-item">' +
                        '<label class="layui-form-label">报修日期：</label>' +
                        '<div class="layui-input-inline">' + (data.warrantyDate ? layui.util.toDateString(new Date(data.warrantyDate), 'yyyy-MM-dd') : '') + '</div>' +
                        '</div>' +
                        '<div class="layui-form-item">' +
                        '<label class="layui-form-label">维修完成日期：</label>' +
                        '<div class="layui-input-inline">' + (data.completionDate ? layui.util.toDateString(new Date(data.completionDate), 'yyyy-MM-dd') : '') + '</div>' +
                        '</div>' +
                        '<div class="layui-form-item">' +
                        '<label class="layui-form-label">验收日期：</label>' +
                        '<div class="layui-input-inline">' + (data.acceptanceDate ? layui.util.toDateString(new Date(data.acceptanceDate), 'yyyy-MM-dd') : '') + '</div>' +
                        '</div>' +
                        '<div class="layui-form-item">' +
                        '<label class="layui-form-label">维修结果：</label>' +
                        '<div class="layui-input-inline">' + (data.repairResults || '') + '</div>' +
                        '</div>' +
                        '<div class="layui-form-item">' +
                        '<label class="layui-form-label">维修人员：</label>' +
                        '<div class="layui-input-inline">' + (data.repairPersonnel || '') + '</div>' +
                        '</div>' +
                        '<div class="layui-form-item">' +
                        '<label class="layui-form-label">验收人员：</label>' +
                        '<div class="layui-input-inline">' + (data.acceptancePersonnel || '') + '</div>' +
                        '</div>' +
                        '<div class="layui-form-item">' +
                        '<label class="layui-form-label">单据状态：</label>' +
                        '<div class="layui-input-inline">' + 
                        (data.documentStatus == '0' ? '待处理' : 
                         data.documentStatus == '1' ? '已完成' : 
                         data.documentStatus == '2' ? '已取消' : '未知') + 
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>',
                    btn: ['关闭'],
                    yes: function(index, layero){
                        layer.close(index);
                    }
                });
            }
        });
    });
    </script>
</body>
</html>
